<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>发布新投票</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script type="text/javascript">
		var voteOptions = [];

		window.onload = function() {
			var isOptionsEmpty = true; // 假设投票选项为空
			var inputs = document.querySelectorAll("input[name='options']");
			for (var i = 0; i < inputs.length; i++) {
				if (inputs[i].value.trim() !== '') { // 如果有非空的输入，则设置为非空
					isOptionsEmpty = false;
					break;
				}
			}

			// 根据投票选项是否为空来启用或禁用提交按钮
			var submitButton = document.querySelector("input[type='image'][src='images/button_submit.gif']");
			if (isOptionsEmpty) {
				submitButton.disabled = true; // 如果投票选项为空，则禁用提交按钮
			} else {
				submitButton.disabled = false; // 如果投票选项不为空，则启用提交按钮
			}
			<c:forEach var="option" items="${voteSubject.voteOptions}" varStatus="status">
			<c:if test="${status.index >= 2}">
			voteOptions.push('<c:out value="${option.voOption}" />');
			</c:if>
			</c:forEach>
			for (var i = 0; i < voteOptions.length; i++) {
				AddOption(voteOptions[i]);
			}
			bindInputEvents();
			addDeleteButtons();
		};

		function bindInputEvents() {
			var inputs = document.querySelectorAll("input[name='options']");
			inputs.forEach(function(input) {
				input.addEventListener('input', checkDuplicates);
			});
		}

		function AddOption(value) {
			var voteOptionsContainer = document.getElementById("voteoptions");
			var p = document.createElement("p");
			var input = document.createElement("input");
			input.type = "text";
			input.className = "input-text";
			input.name = "options";
			if (value) {
				input.value = value;
			}
			input.addEventListener('input', checkDuplicates);
			p.appendChild(input);
			var inputs = document.querySelectorAll("input[name='options']");
			if (inputs.length >= 2) {
				var a = document.createElement("a");
				a.className = "del";
				a.href = "javascript:void(0);";
				a.onclick = function() {
					DelOption(a);
				};
				a.appendChild(document.createTextNode("删除"));
				p.appendChild(a);
			}
			voteOptionsContainer.appendChild(p);
		}
		function DelOption(link) {
			var parentParagraph = link.parentNode;
			parentParagraph.parentNode.removeChild(parentParagraph);
			checkDuplicates();
		}
		function addDeleteButtons() {
			var inputs = document.querySelectorAll("input[name='options']");
			if (inputs.length > 2) {
				inputs.forEach(function(input, index) {
					if (index >= 2 && !input.nextSibling) {
						var a = document.createElement("a");
						a.className = "del";
						a.href = "javascript:void(0);";
						a.onclick = function() {
							DelOption(a);
						};
						a.appendChild(document.createTextNode("删除"));
						input.parentNode.appendChild(a);
					}
				});
			}
		}
		function checkDuplicates() {
			var inputs = document.querySelectorAll("input[name='options']");
			var values = {};
			inputs.forEach(function(input) {
				if (input.value in values) {
					input.style.color = 'red';
				} else {
					input.style.color = '';
					values[input.value] = true;
				}
			});
		}
	</script>
</head>
<body>
<div id="voteManage" class="box">
	<h2>添加新投票</h2>
	<div class="content">
		<form id="voteForm" method="post">
			<dl>
				<dt>投票内容：</dt>
				<dd>
					<input type="hidden" name="vsId" value="${voteSubject.vsId}"/>
					<input type="text" class="input-text" name="vsTitle" value="${voteSubject.vsTitle}"/>
				</dd>
				<dt>投票类型：</dt>
				<dd>
					<input type="radio" name="vsType" value="1" <c:if test="${voteSubject != null && voteSubject.vsType == 1}">checked</c:if> /> 单选
					<input type="radio" name="vsType" value="2" <c:if test="${voteSubject != null && voteSubject.vsType == 2}">checked</c:if> /> 多选
				</dd>
				<dt>投票选项：</dt>
				<dd id="voteoptions">
					<c:choose>
						<c:when test="${voteSubject == null}">
							<p><input type="text" class="input-text" name="options" /></p>
							<p><input type="text" class="input-text" name="options" /></p>
						</c:when>
						<c:otherwise>
							<c:if test="${fn:length(voteSubject.voteOptions) > 0}">
								<c:forEach items="${voteSubject.voteOptions}" var="option" varStatus="status">
									<input type="hidden" name="voId" value="${option.voId}"/>
									<c:if test="${status.index < 2}">
										<p><input type="text" class="input-text" name="options" value="${option.voOption}" /></p>
									</c:if>
								</c:forEach>
							</c:if>
						</c:otherwise>
					</c:choose>
				</dd>
				<dt></dt>
				<dd class="button">
					<input type="image" src="images/button_submit.gif" />
					<a href="javascript:;" onclick="AddOption('')">增加选项</a>
					<a href="javascript:history.go(-1);">取消操作</a>
				</dd>
			</dl>
		</form>
	</div>
</div>
<div id="footer" class="wrap">
	北大青鸟 &copy; 版权所有
</div>
</body>
</html>